import { useEffect, useState } from 'react';

export default function Home() {
  const [roomApiStatus, setRoomApiStatus] = useState('checking...');
  const [assetApiStatus, setAssetApiStatus] = useState('checking...');
  const [highGoodsApiStatus, setHighGoodsApiStatus] = useState('checking...');

  useEffect(() => {
    // Test Room API connectivity
    fetch('/api/room')
      .then(res => {
        if (res.ok) {
          setRoomApiStatus('Room API is running ✅');
        } else {
          setRoomApiStatus('Room API is not responding ❌');
        }
      })
      .catch(err => {
        setRoomApiStatus('Room API connection error ❌');
      });

    // Test Asset API connectivity
    fetch('/api/asset')
      .then(res => {
        if (res.ok) {
          setAssetApiStatus('Asset API is running ✅');
        } else {
          setAssetApiStatus('Asset API is not responding ❌');
        }
      })
      .catch(err => {
        setAssetApiStatus('Asset API connection error ❌');
      });

    // Test High Goods API connectivity
    fetch('/api/high-goods')
      .then(res => {
        if (res.ok) {
          setHighGoodsApiStatus('High Goods API is running ✅');
        } else {
          setHighGoodsApiStatus('High Goods API is not responding ❌');
        }
      })
      .catch(err => {
        setHighGoodsApiStatus('High Goods API connection error ❌');
      });
  }, []);

  return (
    <div style={{ 
      padding: '2rem', 
      fontFamily: 'Arial, sans-serif',
      maxWidth: '800px',
      margin: '0 auto'
    }}>
      <h1>HNLG WebSocket API</h1>
      <p>Welcome to the HNLG WebSocket API service.</p>
      
      <div style={{ 
        background: '#f5f5f5', 
        padding: '1rem', 
        borderRadius: '8px',
        margin: '2rem 0'
      }}>
        <h3>API Status</h3>
        <p><strong>Room API:</strong> {roomApiStatus}</p>
        <p><strong>Asset API:</strong> {assetApiStatus}</p>
        <p><strong>High Goods API:</strong> {highGoodsApiStatus}</p>
      </div>
      
      <div>
        <h3>Available Endpoints</h3>
        
        <div style={{ marginBottom: '2rem' }}>
          <h4> Room Statistics (房产统计)</h4>
          <p style={{ color: '#666', marginBottom: '1rem' }}>基于学校房产统计表（wd_zcgk_bxzyhz）的综合分析接口</p>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/room/basic-stats</code></strong> - 基础统计数据查询
              <br />
              <small style={{ color: '#666' }}>获取总房间数、公用房间数、楼栋数、建筑面积等基本信息</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/room/calculation-analysis</code></strong> - 计算比较分析
              <br />
              <small style={{ color: '#666' }}>公用房间占比、使用面积比例、平均房间数、房间密度等计算分析</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/room/land-analysis</code></strong> - 土地相关分析
              <br />
              <small style={{ color: '#666' }}>办公用房土地、总土地面积、建筑密度、容积率等土地相关分析</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/room/efficiency-analysis</code></strong> - 效率分析
              <br />
              <small style={{ color: '#666' }}>房间利用率、平均房间使用面积、公用房间面积占比、土地使用效率等</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/room/comparison-analysis</code></strong> - 对比分析
              <br />
              <small style={{ color: '#666' }}>建筑面积与使用面积对比、各指标最值分析、面积指标关系分析等</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/room/practical-analysis</code></strong> - 实际应用分析
              <br />
              <small style={{ color: '#666' }}>扩建潜力分析、土地容量分析、空间配置合理性评估等</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/room/complete-analysis</code></strong> - 综合分析报告
              <br />
              <small style={{ color: '#666' }}>整合所有维度的完整房产统计数据分析结果</small>
            </li>
          </ul>
        </div>

        <div style={{ marginBottom: '2rem' }}>
          <h4> Asset Management (资产管理)</h4>
          <p style={{ color: '#666', marginBottom: '1rem' }}>基于学校资产管理表（wd_sec_assets12）的全面分析接口</p>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/asset/basic-stats</code></strong> - 基础统计数据
              <br />
              <small style={{ color: '#666' }}>资产总数、总价值、总面积、平均价格、财政拨款等基本统计</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/asset/category-stats</code></strong> - 分类统计分析
              <br />
              <small style={{ color: '#666' }}>按国管局分类和新国标分类的资产数量、价值统计与对比</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/asset/financial-analysis</code></strong> - 财务分析
              <br />
              <small style={{ color: '#666' }}>财政拨款分析、价格区间分布、高价值资产、资金使用效率等</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/asset/area-analysis</code></strong> - 面积分析
              <br />
              <small style={{ color: '#666' }}>房屋车库面积、土地分摊面积分布与相关性分析</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/asset/time-analysis</code></strong> - 时间分析
              <br />
              <small style={{ color: '#666' }}>购买时间趋势、年度月度模式、时间段分析等</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/asset/personnel-stats</code></strong> - 人员管理统计
              <br />
              <small style={{ color: '#666' }}>领用人资产分布、管理效率、未分配资产等人员管理分析</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/asset/status-analysis</code></strong> - 现状分析
              <br />
              <small style={{ color: '#666' }}>资产现状统计、现状与分类交叉分析、数据完整性评估</small>
            </li>
          </ul>
        </div>

        <div style={{ marginBottom: '2rem' }}>
          <h4> High Goods Management (高价值品管理)</h4>
          <p style={{ color: '#666', marginBottom: '1rem' }}>基于高价值品统计表（wd_zcgk_gjzzcdwfb）的综合分析接口</p>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/high-goods/basic-stats</code></strong> - 基础统计数据
              <br />
              <small style={{ color: '#666' }}>高价值品总数量、总金额、单位数量、平均价值等基本统计</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/high-goods/unit-analysis</code></strong> - 单位分析
              <br />
              <small style={{ color: '#666' }}>各单位高价值品数量和金额排名、分布分析和对比</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/high-goods/quantity-analysis</code></strong> - 数量分析
              <br />
              <small style={{ color: '#666' }}>数量分布、阈值分析、集中度统计和变异分析</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/high-goods/financial-analysis</code></strong> - 金额分析
              <br />
              <small style={{ color: '#666' }}>金额分布、单品价值、性价比、异常金额识别等</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/high-goods/time-analysis</code></strong> - 时间分析
              <br />
              <small style={{ color: '#666' }}>统计时间趋势、年度月度模式、时间序列分析</small>
            </li>
            <li style={{ marginBottom: '0.5rem' }}>
              <strong><code>/api/high-goods/efficiency-analysis</code></strong> - 效率评估
              <br />
              <small style={{ color: '#666' }}>配置效率、风险管理、均衡性评估和投入产出比分析</small>
            </li>
          </ul>
        </div>

        <div>
          <h4>❓ 支持的问题类型</h4>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '1rem' }}>
            <div style={{ background: '#f8f9ff', padding: '1rem', borderRadius: '8px' }}>
              <h5>基础查询问题</h5>
              <ul style={{ fontSize: '0.9rem', color: '#555' }}>
                <li>总房间数是多少？</li>
                <li>有多少个公用房间？</li>
                <li>学校有几栋楼？</li>
                <li>学校总建筑面积是多少？</li>
              </ul>
            </div>
            <div style={{ background: '#fff8f0', padding: '1rem', borderRadius: '8px' }}>
              <h5>计算比较问题</h5>
              <ul style={{ fontSize: '0.9rem', color: '#555' }}>
                <li>公用房间占总房间数的比例是多少？</li>
                <li>使用面积和建筑面积的比例是多少？</li>
                <li>平均每栋楼有多少房间？</li>
              </ul>
            </div>
            <div style={{ background: '#f0fff8', padding: '1rem', borderRadius: '8px' }}>
              <h5>土地相关问题</h5>
              <ul style={{ fontSize: '0.9rem', color: '#555' }}>
                <li>办公用房占用多少土地？</li>
                <li>建筑密度是多少？</li>
                <li>容积率是多少？</li>
              </ul>
            </div>
            <div style={{ background: '#fff0f8', padding: '1rem', borderRadius: '8px' }}>
              <h5>实际应用问题</h5>
              <ul style={{ fontSize: '0.9rem', color: '#555' }}>
                <li>如果要扩建，还能增加多少房间？</li>
                <li>学校的空间配置是否合理？</li>
                <li>土地使用效率如何？</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      
      <div style={{ marginTop: '2rem' }}>
        <h3>Quick Links</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1rem' }}>
          <div>
            <h4>Room Statistics</h4>
            <ul style={{ fontSize: '0.9rem' }}>
              <li><a href="/api/room" target="_blank" rel="noopener noreferrer">Room API Info</a></li>
              <li><a href="/api/room/basic-stats" target="_blank" rel="noopener noreferrer">基础统计</a></li>
              <li><a href="/api/room/calculation-analysis" target="_blank" rel="noopener noreferrer">计算比较</a></li>
              <li><a href="/api/room/land-analysis" target="_blank" rel="noopener noreferrer">土地分析</a></li>
              <li><a href="/api/room/efficiency-analysis" target="_blank" rel="noopener noreferrer">效率分析</a></li>
              <li><a href="/api/room/comparison-analysis" target="_blank" rel="noopener noreferrer">对比分析</a></li>
              <li><a href="/api/room/practical-analysis" target="_blank" rel="noopener noreferrer">实际应用</a></li>
              <li><a href="/api/room/complete-analysis" target="_blank" rel="noopener noreferrer">综合报告</a></li>
            </ul>
          </div>
          <div>
            <h4>Asset Management</h4>
            <ul style={{ fontSize: '0.9rem' }}>
              <li><a href="/api/asset" target="_blank" rel="noopener noreferrer">Asset API Info</a></li>
              <li><a href="/api/asset/basic-stats" target="_blank" rel="noopener noreferrer">基础统计</a></li>
              <li><a href="/api/asset/category-stats" target="_blank" rel="noopener noreferrer">分类统计</a></li>
              <li><a href="/api/asset/financial-analysis" target="_blank" rel="noopener noreferrer">财务分析</a></li>
              <li><a href="/api/asset/area-analysis" target="_blank" rel="noopener noreferrer">面积分析</a></li>
              <li><a href="/api/asset/time-analysis" target="_blank" rel="noopener noreferrer">时间分析</a></li>
              <li><a href="/api/asset/personnel-stats" target="_blank" rel="noopener noreferrer">人员管理</a></li>
              <li><a href="/api/asset/status-analysis" target="_blank" rel="noopener noreferrer">现状分析</a></li>
            </ul>
          </div>
          <div>
            <h4>High Goods Management</h4>
            <ul style={{ fontSize: '0.9rem' }}>
              <li><a href="/api/high-goods" target="_blank" rel="noopener noreferrer">High Goods API Info</a></li>
              <li><a href="/api/high-goods/basic-stats" target="_blank" rel="noopener noreferrer">基础统计</a></li>
              <li><a href="/api/high-goods/unit-analysis" target="_blank" rel="noopener noreferrer">单位分析</a></li>
              <li><a href="/api/high-goods/quantity-analysis" target="_blank" rel="noopener noreferrer">数量分析</a></li>
              <li><a href="/api/high-goods/financial-analysis" target="_blank" rel="noopener noreferrer">金额分析</a></li>
              <li><a href="/api/high-goods/time-analysis" target="_blank" rel="noopener noreferrer">时间分析</a></li>
              <li><a href="/api/high-goods/efficiency-analysis" target="_blank" rel="noopener noreferrer">效率评估</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}